<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义查询预览</title>
    <#include "/pubHeadStyle.html">
</head>
<body>
<form class="layui-form" lay-filter="formData" id="formData">
    <div class="layui-btn-container" style="position: absolute;bottom: 0;left:46%">
        <a class="layui-btn layui-btn-danger" id="close">关闭</a>
    </div>
    <div class="" style="padding-top:10px" id="conditionAppend">
        <div class="layui-form-item">
            <i class="layui-icon alone-tips" lay-tips="查询字段为时间类型时，格式为yyyy-mm-dd;当条件为Between时，格式为yyyy-mm-dd,yyyy-mm-dd。" style="margin-right: -33px;right: 50%;padding-left: 13px;padding-top: 10px;color: #000;display: inline-block;"></i>
            <a class="layui-btn layui-btn-sm" style="margin-left:33px;" id="query">查询</a>
            <a class="layui-btn layui-btn-sm" id="assist">使用帮助</a>
        </div>
    </div>
    <div class="resultDiv" style="display:none;padding-left:60px;width: 622px;height: 338px;word-wrap: break-word;word-break: break-all;overflow: hidden;overflow-y: auto;"></div>
    <div class="assistDiv" style="display:none;overflow-y: auto;"></div>
</form>
<script src="${ctx}/formStatic/form/CommonDialog.js"></script>
<script>
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'table', 'layer', 'jquery', 'form', 'setter', 'commons'], function () {
        var table = layui.table, setter = layui.setter, $ = layui.jquery, form = layui.form, commons = layui.commons;
        form.render();
        var index = parent.layer.getFrameIndex(window.name);
        $("#close").on('click', function () {
            parent.layer.close(index)
        });
        var alias = '${alias}';
        var conditionArray;
        //设置列后台接口
        $.ajax({
            url: serverPath.formPath + setter.formLinkPath +"formQuery/queryObj",
            dataType: 'json',
            type: "post",
            data: {"alias": alias},
            success: function (result) {
                if(commons._filterRecord(result)){
                    conditionArray = JSON.parse(result.data.conditionfield);
                    $.each(conditionArray,function(i,item){
                        var input;
                        if(item.defaultType==='2'||item.defaultType==='3'){
                            input = '<input type="text" name="'+item.field+'" class="layui-input" style="width: 210px" value="'+item.defaultValue+'" disabled="disabled"/>\n';
                        }else{
                            input = '<input type="text" name="'+item.field+'" class="layui-input" style="width: 210px"/>\n';
                        }
                        $("#conditionAppend").append(
                            //'<div class="layui-form-item">\n' +
                            '   <div class="layui-inline">\n' +
                            '       <label class="layui-form-label outofHiding" title='+item.comment+'>'+item.comment+': </label>\n' +
                            '       <div class="layui-input-block" style="display: inline-block;margin-left: 0;">\n' +
                            input +
                            '       </div>\n' +
                            '   </div>\n'
                            //'</div>'
                        );
                    });
                }
            }
        });


        //查询
        $("#query").on('click', function () {
            $(".resultDiv").show();
            $(".assistDiv").hide();
            search ();
        });
        //查询方法
        function search (){
            var div = $(".resultDiv");
            div.html('<span style="color: #8c8c8c">正在进行查询...</span>');
            var data = getQueryData();
            var condition = {alias:alias,page:1,pagesize:10,querydata:data};
            DoQuery(condition,function(result){
                div.html('');
                if(commons._filterRecord(result)){
                    if(result.data.errors){
                        div.html('<span style="color: red">'+result.data.errors+'</span>');
                    }else{
                        var html = JSON.stringify(result.data.list);
                        div.html(html);
                    }
                }
            });
        }

        //使用帮助
        $("#assist").on('click', function () {
            $(".assistDiv").show();
            $(".resultDiv").hide();
            $(".assistDiv").height($(".layui-layout-body").height()-$("#conditionAppend").height()-80);
            help();
        });

        function getQueryData(){
            var data = [];
            $.each(conditionArray,function(i,item){
                var single ='"' + item.field + '":"' + $("input[name='"+item.field+"']").val() + '"';
                data.push(single);
            });
            data = '{' + data.join(',') + '}';
            return data;
        }

        //帮助
        function help(){
            $(".assistDiv").html(
                  '<div class="layui-form-item">\n' +
                  '    <label class="layui-form-label">POST参数:</label>\n' +
                  '    <div class="layui-input-block" style="width: 70%;margin-left:114px;">\n' +
                  '        <textarea name="" cols="75" rows="4">' +
                  'var querydata = "'+getQueryData()+'",\n'+
                  'condition = {alias:"'+alias+'",page:1,pagesize:10,querydata:querydata};\n' +
                  'isSync:是否同步,isSync=true,表示为同步,可以省略，省略为异步。' +
                  '        </textarea>\n' +
                  '    </div>\n' +
                  '</div>\n' +
                  '<div class="layui-form-item">\n' +
                  '    <label class="layui-form-label">调用的方法:</label>\n' +
                  '    <div class="layui-input-block" style="width: 70%;margin-left:114px;">\n' +
                  '        <textarea name="" cols="75" rows="4">' +
                  'DoQuery(condition,function(result){},isSync);该方法定义在/formStatic/form/CommonDialog.js中' +
                  '        </textarea>\n' +
                  '    </div>\n' +
                  '</div>\n' +
                  '<div class="layui-form-item">\n' +
                  '    <label class="layui-form-label">回调方法:</label>\n' +
                  '    <div class="layui-input-block" style="width: 70%;margin-left:114px;">\n' +
                  '        <textarea name="" cols="75" rows="4">查询的返回值result.data是QueryResult类的一个实例</textarea>\n' +
                  '    </div>\n' +
                  '</div>\n' +
                  '<div class="layui-form-item">\n' +
                  '    <label class="layui-form-label">其他说明:</label>\n' +
                  '    <div class="layui-input-block" style="width: 70%;margin-left:114px;">\n' +
                  '        <textarea name="" id="" cols="75" rows="4">' +
                  '1、POST的参数中page是页码、pagesize是每页条数，分页查询时需要传递这2个参数，不传表示不进行分页查询；\n' +
                  '2、alias是通用表单查询别名，querydata是用作查询的字段名、字段值；\n' +
                  '3、返回值result中，result.data.errors存放错误信息，没有出错则为空白，result.data.list存放了查询的结果，result.data.isPage表示是否分页(0:不分页,1:分页),result.data.totalCount和result.data.totalPage分别记录了查询结果的总数和分页的总页数。' +
                  '        </textarea>\n' +
                  '    </div>\n' +
                  '</div>')
        }
    });
</script>
<style>
    #LAY_app{
        overflow: hidden;
    }
    .outofHiding{
        width: 95px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
</body>
</html>